<template>
  <div class="upload">
    <el-upload
      :action="uploadOptions.url"
      :headers="uploadOptions.header"
      class="avatar-uploader"
      name="file"
      accept="image/png, image/jpeg"
      :show-file-list="false"
      :on-success="handleAvatarSuccess"
      :on-change="handleAvatarProgress"
      :style="`width: ${width}; height: ${height}`"
    >
      <img
        v-if="imgUrl.absoluteUrl"
        :src="imgUrl.absoluteUrl"
        class="avatar"
        :style="`width: ${width}; height: ${height}`"
      >
      <i v-else class="el-icon-picture-outline avatar-uploader-icon" />
    </el-upload>
  </div>
</template>

<script>
import { getToken } from '@/utils/auth';
class UploadOptions {
  // url = process.env.VUE_APP_BASE_API + '/files/imgUpload';
  // url = process.env.VUE_APP_BASE_API + '/files/imgUpload';

  url = window.server.SERVER_API[0].api + '/files/imgUpload';
  // url = getToken('api_domain') + '/files/imgUpload';
  header = {
    'Authentication': getToken('auth_key') ? getToken('auth_key') : '',
    'userId': getToken('session_id') ? getToken('session_id') : '',
    'clientType': 0
  }
}
class Img {
  absoluteUrl = '';
  relativeUrl = '';
}
export default {
  name: 'ImgUploadOne',
  props: {
    existUrl: {
      type: Object,
      default: () => {
        return {
          absoluteUrl: '',
          relativeUrl: ''
        };
      }
    },
    width: {
      type: String,
      default: '120px'
    },
    height: {
      type: String,
      default: '120px'
    },
    fileDir: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      uploadOptions: new UploadOptions(),
      imgUrl: new Img() // 图片
    };
  },
  watch: {
    existUrl(newVal) {
      // console.log(newVal);
      if (newVal) {
        this.imgUrl = this.existUrl;
      }
    },
    width(e) {
      // console.log(e);
    }
  },
  mounted() {
    // console.log(this.width);
    this.imgUrl = this.existUrl;
    if (this.fileDir) {
      this.uploadOptions.header['file-dir'] = this.fileDir;
    }
    // console.log(this.uploadOptions.header.file_dir);
  },
  methods: {
    setData(url) {
      this.existUrl = url;
      this.imgUrl = url;
    },
    // 初始化图片显示
    open() {
      this.imgUrl = '';
    },
    // 图片上传校验
    beforeAvatarUpload(file) {
      console.log(file);
      if (file.type.indexOf('image') == -1) {
        this.$message.error('请上传正确的图片格式');
        return false;
      }
      const isLt10M = file.size / 1024 / 1024 < 10;
      if (!isLt10M) {
        this.$message.error('上传凭证图片大小不能超过10MB!');
        return false;
      }
    },
    // 上传图片成功回调
    handleAvatarSuccess(res) {
      // console.log(res);
      if (res) {
        // const { data } = res;
        this.imgUrl = {
          absoluteUrl: res.data
          // relativeUrl: data.save_name
        };
        this.$emit('setUrl', this.imgUrl);
      } else {
        this.$message.info(res.msg);
      }
    },
    // 上传图片失败回调
    handleAvatarProgress(res) {
      // console.log(res);
      // if (res) {
      //   const { data } = res;
      //   this.imgUrl = {
      //     absoluteUrl: data.file_path,
      //     relativeUrl: data.save_name
      //   };
      //   this.$emit('setUrl', this.imgUrl);
      // } else {
      //   this.$message.info(res.msg);
      // }
    }
  }
};
</script>

<style scoped lang="scss">
$img_width: 120px;
$img_height: 120px;
.avatar-uploader ::v-deep.el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader ::v-deep.el-upload:hover {
  border-color: #295394;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: $img_width;
  height: $img_height;
  line-height: $img_height;
  text-align: center;
}
.avatar {
  width: $img_width;
  height: $img_height;
  display: block;
}
</style>
